import * as echarts from '../../components/ec-canvas/echarts';
const config = require('../../serverUtils/config.js');
const http = require('../../serverUtils/httputils.js');
let chart;
Page({
  data: {
    equipmentTypeName: '',
    options: {},
    showType: 1, // 1普通带chart 2虫情图片预览 
    weatherList: [
      // 气象监测内容列
      {
        id: 1,
        name: '空气温度',
        value: '45.6%',
        imgName: 'kqsd'
      },
      {
        id: 2,
        name: '大气压力',
        value: '45.6%',
        imgName: 'dqyl'
      },
      {
        id: 3,
        name: '光照度',
        value: '45.6%',
        imgName: 'gzd'
      },
      {
        id: 5,
        name: '风向',
        value: '偏北风',
        imgName: 'fx'
      },
      {
        id: 7,
        name: '降雨量',
        value: '32',
        imgName: 'jyl'
      },
      {
        id: 8,
        name: '二氧化碳',
        value: '67',
        imgName: 'eyht'
      }
    ],
    detailObj: {},
    barChart: {},
    visible: false,
    previewImages: [],
    deviceId: 0,
    pageSize: 10,
    pageNo: 1,
    imagesList: []
  },
  onShow() {

  },
  getChartDetail(id) {
    this.data.weatherList = []
    http.postRequest(
      null,
      config.getEquipmentinfoDetail, {
        id,
        // startTime: '',
        // endTime: ''
      },
      (res) => {
        console.log("🚀 ~ onLoad ~ res:", res)
        const {
          data: {
            nyEquipmentinfo,
            detailList
          }
        } = res
        if (nyEquipmentinfo.displayType == 1) {
          // detailType.value = 1
          detailList && this.getEchartsData(detailList);
          if (detailList != null) {
            if (detailList.nyEquipmentinfoNewDataList != null && detailList.nyEquipmentinfoNewDataList.length > 0) {
              for (let i = 0; i < detailList.nyEquipmentinfoNewDataList.length; i++) {
                this.setData({
                  weatherList: [...this.data.weatherList, {
                    id: i,
                    name: detailList.nyEquipmentinfoNewDataList[i].key,
                    value: detailList.nyEquipmentinfoNewDataList[i].value,
                    imgName: this.getImgName(detailList.nyEquipmentinfoNewDataList[i].key)
                  }]
                })
              }
            }
          }
        } else {
          // detailType.value = 2

        }
        this.setData({
          detailObj: nyEquipmentinfo
        })
      },
      (err) => {

      },
    )


  },
  getEchartsData(val) {
    console.log("val:" + JSON.stringify(val).toString());
    const lineData = {
      legend: val.legend,
      xData: [1, 2, 3, 4, 5] || val.xdata,
      yData: [
        [1, 2, 3, 9, 5],
        [2, 2, 6, 4, 5],
        [3, 4, 3, 3, 5],
        [6, 5, 3, 4, 5],
        [7, 2, 3, 4, 5],
      ] || val.ydata,
      smooth: true,
      color: ['#258cff', '#27CDFF', '#ffc21e', '#1cf1f5', '#df6b63'],
      areaColor: [
        [{
            offset: 0,
            color: 'rgba(234,211,149,0.9)'
          },
          {
            offset: 0.5,
            color: 'rgba(234,211,149,0.4)'
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ],
        [{
            offset: 0,
            color: 'rgba(44,125,175,0.9)'
          },
          {
            offset: 0.5,
            color: 'rgba(44,125,175,0.4)'
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ],
        [{
            offset: 0,
            color: 'rgba(127,176,231,0.9)'
          },
          {
            offset: 0.5,
            color: 'rgba(127,176,231,0.4)'
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ],
        [{
            offset: 0,
            color: 'rgba(12,85,151,0.9)'
          },
          {
            offset: 0.5,
            color: 'rgba(12,85,151,0.4)'
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ],
        [{
            offset: 0,
            color: 'rgba(205,165,162,0.9)'
          },
          {
            offset: 0.5,
            color: 'rgba(205,165,162,0.4)'
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ]
      ],
      imagesList: [],
      datatitle: '',
      total: '',
      loading: false
    }
    this.data.options = this.drawLine(lineData) // echart折线图
    this.setData({
      barChart: {
        onInit: this.initChart,
      },
    });
  },
  drawLine(data) {
    let _series = []
    for (let i = 0; i < data.legend.length; i++) {
      _series.push({
        name: data.legend[i],
        type: 'line',
        smooth: data.smooth,
        data: data.yData[i],
        itemStyle: {
          color: data.color[i],
          label: {
            textStyle: {
              color: '#666',
              fontSize: 10
            }
          }
        },
        showSymbol: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, data.areaColor[i])
        }
      })
    }
    // console.log('data', data);
    // console.log('_series', _series);
    let option = {
      tooltip: {
        trigger: 'axis'
      },
      // gird: {
      // top: '1%',
      // left: '2%',
      // bottom: '4%',
      // right: '2%',
      // containLabel: true
      // },
      legend: {
        data: data.legend,
        show: true,
        itemWidth: 18,
        itemHeight: 8,
        top: 10,
        right: 10,
        textStyle: {
          color: '#666',
          lineHeight: 12
        }
      },
      // data.xData || 
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.xData,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#dbdbdb',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          //x轴文字的配置
          show: true,
          color: '#666',
          fontSize: 12
        },
        splitLine: {
          show: false
          // lineStyle: {
          //   type: 'dashed',
          //   color: ['#888'],
          //   opacity: 0.2
          // }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          // show: true,
          lineStyle: {
            color: '#dbdbdb',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          //y轴文字的配置
          show: true,
          color: '#666',
          fontSize: 12
        },
        splitNumber: 3,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: ['#888'],
            opacity: 0.2
          }
        }
      },
      series: _series
    }
    return option
  },
  getImgName(name) {
    if (name == null) return
    if (name.includes("空气") || name.includes("温度")) {
      return 'kqsd'
    } else if (name.includes("大气") || name.includes("气压")) {
      return 'dqyl'
    } else if (name.includes("光照")) {
      return 'gzd'
    } else if (name.includes("风速")) {
      return 'fs'
    } else if (name.includes("风向")) {
      return 'fx'
    } else if (name.includes("土壤")) {
      return 'trsd'
    } else if (name.includes("降雨")) {
      return 'jyl'
    } else if (name.includes("二氧")) {
      return 'eyht'
    } else if (name.includes("电导率")) {
      return 'dd'
    } else if (name.includes("水质")) {
      return 'ph'
    } else if (name.includes("液位")) {
      return 'yw'
    } else if (name.includes("数目") || name.includes("数量")) {
      return 'sl'
    } else if (name.includes("雨量")) {
      return 'yl'
    } else {
      return 'eyht'
    }
  },
  onPreviewClose() {
    this.setData({
      visible: false,
      previewImages: []
    })
  },
  previewImg(e) {
    console.log('img', e.currentTarget.dataset);
    const {
      img
    } = e.currentTarget.dataset
    this.setData({
      visible: true,
      previewImages: [img]
    })
  },
  getIamgeData() {
    this.setData({
      loading: true
    })
    http.getRequest(
      null,
      config.deviceDetail, {
        id: this.data.deviceId,
        current: this.data.pageNo,
        size: this.data.pageSize
      },
      (res) => {
        console.log("🚀 ~ onLoad ~ current:", res)
        const {
          records,
        } = res.data.page

        this.setData({
          imagesList: [...this.data.imagesList, ...records],
          loading: false,
          total: res.data.page.total,
          datatitle: res.data.columns[1].title
        })
      },
      (err) => {

      },
    )
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },
  onLoad(e) {
    console.log('wwww', e);
    let showType = 1
    if (e.equipmentTypeName?.includes('虫情')) {
      showType = 2
    }
    this.setData({
      detailObj: {
        ...this.data.detailObj,
      },
      deviceId: e.id,
      equipmentTypeName: e.equipmentTypeName,
      showType
    })
    this.getChartDetail(this.data.deviceId)
    this.getIamgeData()
  },
  lower(e) {
    if (!this.data.loading && Math.ceil(this.data.total / this.data.pageSize) > this.data.pageNo) {
      //加载更多，这里做下延时加载
      // setTimeout(function () {
      this.setData({
        pageNo: this.data.pageNo + 1
      })
      this.getIamgeData()
      // }, 2000)
    }
  },
  getOption() {
    var option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
    return option;
  },
  getImgName(name) {
    if (name == null) return
    if (name.includes("空气") || name.includes("温度")) {
      return 'kqsd'
    } else if (name.includes("大气") || name.includes("气压")) {
      return 'dqyl'
    } else if (name.includes("光照")) {
      return 'gzd'
    } else if (name.includes("风速")) {
      return 'fs'
    } else if (name.includes("风向")) {
      return 'fx'
    } else if (name.includes("土壤")) {
      return 'trsd'
    } else if (name.includes("降雨")) {
      return 'jyl'
    } else if (name.includes("二氧")) {
      return 'eyht'
    } else if (name.includes("电导率")) {
      return 'dd'
    } else if (name.includes("水质")) {
      return 'ph'
    } else if (name.includes("液位")) {
      return 'yw'
    } else if (name.includes("数目") || name.includes("数量")) {
      return 'sl'
    } else if (name.includes("雨量")) {
      return 'yl'
    } else {
      return 'eyht'
    }
  },
  getData() {
    nyEquipmentinfoApi.nyEquipmentinfoPage(Object.assign({
      current: pageNum,
      size: 8
    }, searchFormParam)).then((data) => {
      console.log('列表数据对象', data)
      if (data != null) {
        data.records.forEach((item) => {
          if (item.nyEquipmentinfoNewDataList != null && item.nyEquipmentinfoNewDataList.length > 0) {
            item.nyEquipmentinfoNewDataList.forEach((item) => {
              item.imgName = this.getImgName(item.key)
            })

          }
        })
        //weather.imgName
      }
      this.setData({
        data
      })

    })
  },
  initChart(canvas, width, height, dpr) {
    console.log('canvas, width, height, dpr', this.data.options);
    // 如果存在的话，清空之前的数据
    if (chart) {
      chart = null;
    }
    console.log('echarts', echarts);
    chart = echarts.init(canvas, null, {
      width,
      height,
      devicePixelRatio: dpr, // new
    });

    canvas.setChart(chart);
    chart.setOption(this.data.options);
    console.log('chart', chart);
    return chart;
  },

});